<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
</head>
<body class="hold-transition skin-black sidebar-mini">
    <div th:replace="common/fragment :: link"></div>
    <div class="wrapper">
        <div th:replace="common/fragment :: navbar"></div>
        <div th:replace="common/fragment :: menu"></div>
        <div class="content-wrapper">
            <section class="content-header">
                <h1>权限管理</h1>
            </section>
            <section class="content">
                <div class="box" >

                    <!--高级查询--->
                    <form class="form-inline" id="searchForm" action="/permission/list" method="post">

                        <!-- ==== bootstrap 的高级查询 ==== -->
                        关键字:<input type="text" name="key">
                        <a href="#" class="btn btn-success btn-input" style="margin: 10px" onclick="searchOp()">
                            <span class="glyphicon glyphicon-search"></span> 查询
                        </a>

                        <!--=========新增========-->
                        <a href="#" class="btn btn-success btn-input" style="margin: 10px" onclick="addOp()">
                            <span class="glyphicon glyphicon-plus"></span> 添加
                        </a>
                        
                        <input type="hidden" name="currentPage" id="currentPage" value="1">
                        <a href="javascript:void(0)" class="btn btn-success btn-reload" style="margin: 10px;">
                            <span class="glyphicon glyphicon-repeat"></span>  重新加载
                        </a>
                        <a href="javascript:void(0)" onclick="exportFun()" class="btn btn-success" style="margin: 10px;">
                            <span class="glyphicon glyphicon-repeat"></span>  导出
                        </a>
                        <a href="javascript:void(0)" onclick="importFun()" class="btn btn-success" style="margin: 10px;">
                            <span class="glyphicon glyphicon-repeat"></span>  导入
                        </a>

                    </form>
                    <!-- 未使用 bootstrap-table 时的 table表自己在表里面写数据  -->
                    <div class="box-body table-responsive ">
<!--                        <table class="table table-hover table-bordered table-striped" >-->
<!--                            <thead>-->
<!--                            <tr>-->
<!--                                <th>编号</th>-->
<!--                                <th>权限名称</th>-->
<!--                                <th>权限表达式</th>-->
<!--                            </tr>-->
<!--                            </thead>-->
<!--                            <tbody>-->
<!--                                <tr th:each="permission:${pageInfo.list}">-->
<!--                                    <td th:text="${permission.id}">1</td>-->
<!--                                    <td th:text="${permission.name}">权限名称</td>-->
<!--                                    <td th:text="${permission.expression}">department:list</td>-->
<!--                                </tr>-->
<!--                            </tbody>-->
<!--                        </table>-->
<!--                        <div th:replace="common/fragment :: page"></div>-->
                    </div>

                    <!-- ===== 使用 Bootstrap Table 需要一个空的 table表, 框架给我们填写数据==== -->
                    <div class="table-demo">
                        <table id="table"></table>
                    </div>

                </div>
            </section>
        </div>
        <div th:replace="common/fragment :: footer"></div>
    </div>
    <!-- ===== 权限新增/编辑 模态框  ====== -->
    <div class="modal fade" tabindex="-1" role="dialog" id="saveOrUpdateModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">权限新增</h4>
                </div>
                <!-- ====  模态框里的表单=== -->
                <form id="saveOrUpdateForm" action="#" method="post">
                    <input type="hidden" name="id" id="id">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="name">名称</label>
                            <input type="text" class="form-control" name="name" id="name" placeholder="名称">
                        </div>
                        <div class="form-group">
                            <label for="expression">权限表达式</label>
                            <input type="text" class="form-control" name="expression" id="expression" placeholder="权限表达式">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="saveOrUpdateBtn" type="button" class="btn btn-primary">保存</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</body>

<!-- ===== bootstrap ==== -->
    <script>
        //设置需要显示的列
        var columns = [{
            field: 'id',
            title: '权限编号'
        }, {
            field: 'name',
            title: '权限名称'
        }, {
            field: 'expression',
            title: '权限表达式'
        }, {
            // field: 'expression',  // 字段可以不写
            title: '操作',
            formatter: function formatter(value, row, index){
                // console.log(arguments);
                // 第一个参数：    ;第二个参数是：每行的数据js对象 ;第三个参数是：数据行的索引(0开始)
                console.log(value, row, index);

                // 返回这一列  title: '操作'  数据形式(需要显示按钮)
                var actions = [];
                actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="editOp('+row.id+')"><i class="fa fa-edit"></i>编辑</a> ');
                actions.push('<a class="btn btn-danger btn-xs btn-delete" href="javascript:void(0)" onclick="deleteOp('+row.id+')"><i class="fa fa-remove"></i>删除</a> ');
                return actions.join('');
            }
        }];


        //bootstrap table 初始化数据
        $('#table').bootstrapTable({
            columns: columns,   // 设置需要显示的列 的变量
            //******服务器端分页设置****
            url: "/permission/listPage", //服务器返回数据的网址
            method: 'GET',   //数据请求方式

            // =======对应对应的主键=====
            uniqueId:"id",// 设置唯一字段（对应主键）

            sidePagination:'server',//设置服务器端分页*********************
            pagination:true,//开启分页
            pageNumber:1, //当前地基页
            pageSize:5, //每页显示数据条数
            pageList:"[5, 10, 20]",
            paginationHAlign:"center",
            // 高级查询传入的参数， 使用的 key 为请求传的参数名(名字自己定义)
            queryParams:function(params) {
                params.key=$("[name=key]").val();  // params.高级查询的参数名
                return params;
            },

        });

        // 高级查询，搜索框
        function searchOp() {
            // 重新刷新加载表格的的数据
            $('#table').bootstrapTable('refresh');
        }

        // 点击新增按钮
        function addOp() {
            // 显示权限的新增
            $(".modal-title").html("权限编辑");
            // 删除 模态框里面输入框的值
            $("#saveOrUpdateForm input").val('');

            // 显示模态框
            $("#saveOrUpdateModal").modal("show");

        }

        // 点击新增 --> 保存按钮绑定点击事件 --> 发送ajax请求
        $("#saveOrUpdateBtn").click(function () {
            console.log(11);
            $.post('/permission/saveOrUpdate', $("#saveOrUpdateForm").serialize(), function (data) {
                if (data.success){
                    // 成功或就刷新;重新刷新加载表格的的数据
                    $('#table').bootstrapTable('refresh');
                    $("#saveOrUpdateModal").modal("hide");
                }else {
                    // 失败就弹出错误信息
                    Swal.fire(data.msg);
                }
            })
        });

        // 点击编辑按钮
        function editOp(id) { // 注意接收传入的id
            //
            $(".modal-title").html("权限编辑");
            // 编辑时做 模态框的数据回显
            var row = $("#table").bootstrapTable("getRowByUniqueId", id); //根据唯一Id获取行数据的方法
            $("#id").val(row.id); // 传入id用于后端 修改/编辑时的判断
            $("#name").val(row.name);
            $("#expression").val(row.expression);

            // 显示模态框
            $("#saveOrUpdateModal").modal("show");
        }

        // 删除操作
        function deleteOp(id) {
            console.log("ok...");
            var param = "id=" + id;
            $('.btn-delete').click(function () {
                Swal.fire({
                    title: '您确定要删除吗？',
                    text: "此操作不可撤销!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then((result) => {
                    if(result.value) {
                        // 点了确定做什么，由开发者决定
                        console.log(11)
                        // 发送 Ajax 请求
                        $.post('/permission/delete', param, function (data) {
                            if (data.success){
                                // 重新刷新加载表格的的数据
                                $('#table').bootstrapTable('refresh');
                            }else {
                                alert(data.msg);
                            }
                        })
                    }
                });
            });
        }
        
    </script>



    <!--=====================  文件的导入、导出 ===========================-->
    <script>
        // 导入文件
        function importSave() {
            // 把文件以 ajax文件的上传到后台服务器
            // 1 获取选中的文件
            // $("#uploadFile")             jquery对象
            // $("#uploadFile")[0]          dom对象
            // $("#uploadFile")[0].files    拿到选中文件的集合
            // $("#uploadFile")[0].files[0]  文件集合的第一个文件(因为只是上传了一个文件)
            // 通过jQuery的 ajax 请求把文件传到服务器中
            var file = $("#uploadFile")[0].files[0];
            if (!file){
                Swal.fire("亲选择文件");
                return;
            }

            // FormData 接收封装文件
            var formData = new FormData();
            formData.append("file", file);  // 注意，后接收参数的名字跟这里的 file 保持一致
            $.ajax({
                url: "/permission/import",
                type: "post",
                data: formData,
                contentType: false,
                processData: false,
                success: function(data) {
                    // data 是返回的 JSONResult{success:true, msg: xxx}
                    if (data.success){
                        window.location.reload(); // 更新加载
                    }else {
                        $("#importModal").modal("hide");
                        Swal.fire(data.msg); // 弹出信息
                    }
                }
            })
        }

        // 下载模板
        function downloadTemplateOP() {
            window.location.href = "/static/template/permissionData.xlsx";
        }

        // 点击上传弹出模态框
        function importFun() {
            console.log(11);
            // 弹出模态框
            $("#importModal").modal("show");
        }


        function exportFun(){
            console.log(11);
            window.location.href = "/permission/export";
        }

        $(".btn-reload").click(function () {
            console.log(11);
            $.post('/permission/load', function () {
                $("#searchForm").submit();
            })
        });
    </script>


</html>